<template>
	<view class="post-card radius-l back-white" :class="removeList.indexOf(post.id)!=-1?'b-p':''">
		<view style="position: relative;" class="prow-l" :style="{ paddingBottom: post.status!=1?'24rpx':'' }" :class="post.status!=1?'pb24':''" @click="gotoPostDetail()">
			<!-- 个人头像名称发布时间 -->
			<view class="row-box pcol-l">
				<u-avatar class="mr-l" style="height: 84rpx;" size="84" :src="post.userIcon"></u-avatar>
				<view class="col-box">
					<view class="row-box start">
						<text>{{ post.userNickName }}</text>
						<view v-if="post.isAnonymous==0" class="row-box">
							<image src="../../static/实名.png" class="icon32 ml-base mr-10"></image>
							<!-- <text class="s24 primary" style="line-height: 24rpx;">已实名</text> -->
						</view>
					</view>
					<text class="s24 grey-light">{{ post.ct }}</text>
				</view>
				<!-- 勾选框 -->
				<view v-if="canRemove" class="row-box center check-box" :class="removeList.indexOf(post.id)!=-1?'b-p':''">
					<u-icon v-if="removeList.indexOf(post.id)!=-1" name="checkmark" :bold="true" :color="primaryColor" size="44"></u-icon>
				</view>
			</view>
			<!-- 帖子文字内容 -->
			<text style="display: block;width: 100%;">{{ post.description }}</text>
			<!-- 图片或视频 -->
			<!-- 图片1张显示一行1张 2张4张一行2张 其他都是一行3张  -->
			<view v-if="post.video" style="padding-top: 20rpx;" class="image-grid grid1">
				<image class="radius-base" :src="post.coverImage" mode="heightFix"></image>
			</view>
			<view v-else-if="arrImage.length" style="padding-top: 20rpx;" class="image-grid" :class="imageGridNum">
				<image v-for="(item, index) in arrImage" :key="index" class="image radius-base" :src="item" :mode="arrImage.length==1?'heightFix':'aspectFill'"></image>
			</view>
			<view class="row-box pcol-base" style="border-bottom: 2rpx solid #f0f0f0;">
				<u-icon class="mr-base" name="map-fill" :color="primaryColor" :size="28"
					:label="post.schoolName?post.schoolName:'全部校区'" label-size="24" label-pos="right" :label-color="primaryColor" margin-left="4">
				</u-icon>
				<u-icon class="mr-base" name="tags-fill" :color="primaryColor" :size="28"
					:label="post.typeName" label-size="24" label-pos="right" :label-color="primaryColor" margin-left="4">
				</u-icon>
			</view>
			<!-- 审核状态 -->
			<view v-if="post.status!=1" class="audit-box" style="padding-top: 20rpx;">
				<text :class="post.status==2?'red':'grey-dark'" style="min-width: 160rpx;">{{ post.status==2?`${statusArr[post.status]}：`:statusArr[post.status] }}</text>
				<text v-if="post.status==2" class="red" style="text-decoration: underline;">{{ post.messageContent }}</text>
			</view>
		</view>
		
		<!-- 底部操作区域 status状态( -1：查看全部，0:审核中，1:审核通过，2:审核拒绝) -->
		<view v-if="post.status==1" class="row-grid-box">
			<button open-type="share" :id="`share_${index}`" hover-class="none" class="row-box center" style="background: transparent;">
				<u-icon class="row-box center" name="share" custom-prefix="custom-icon" :color="nomarlColor" :size="34"
					label='分享' label-size="28" label-pos="right" :label-color="nomarlColor" margin-left="10">
				</u-icon>
			</button>
			<u-icon class="row-box center" name="comment" custom-prefix="custom-icon" :color="nomarlColor" :size="34"
				:label="formatPraisesComments(post.commentCount, '评论')" label-size="28" label-pos="right" :label-color="nomarlColor" margin-left="10" @click="gotoPostDetail()">
			</u-icon>
			<!-- 点赞过redColor 未点赞nomarlColor 点赞数0显示点赞 点赞数超过1显示点赞数 -->
			<u-icon class="row-box center" :name="post.praiseStatus?'heart-fill':'heart'" :color="post.praiseStatus?redColor:nomarlColor" :size="34"
				:label="formatPraisesComments(post.praiseCount, '点赞')" label-size="28" label-pos="right" :label-color="nomarlColor" margin-left="10" @click.stop="praise(post.id)">
			</u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			post: {
				type: Object,
				default: function() {
					return {}
				}
			}, // 帖子对象
			
			index: {
				type: Number,
				default: 0
			}, // 帖子在列表内下标
			
			
			// 是否可以删除
			canRemove: {
				type: Boolean,
				default: false
			},
			// 待删除列表
			removeList: {
				type: Array,
				default: []
			}
		},
		computed: {
			// 将图片地址字符串转为数组
			arrImage() {
				if (!this.post.images) return []
				let arr = this.post.images.split(",")
				return arr
			},
			// 图片布局方式
			imageGridNum() { // 图片1张显示一行1张 2张4张一行2张 其他都是一行3张
				let length = this.arrImage.length
				if (length==1) {
					return 'grid1'
				} else if (length==2 || length==4) {
					return 'grid2'
				} else {
					return 'grid3'
				}
			},
		},
		data() {
			return {
				statusArr: [ '审核中', '审核通过', '审核拒绝'], // 状态数组
			}
		},
		methods: {
			
			// 勾选删除
			clickCheck(id) {
				this.$emit("clickCheck", id)
			},
			
			// 根据帖子是否是视频跳转到对应帖子详情页
			gotoPostDetail() {
				if (this.canRemove) { // 如果处在编辑状态
					return this.$emit("clickCheck", this.post.id)
				}
				
				if (this.post.video) {
					uni.navigateTo({
						url: `/pages/subPackage/post/post_video/post_video?id=${this.post.id}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/subPackage/post/post_image/post_image?id=${this.post.id}`
					})
				}
			},
			
			// 点赞
			praise(id) {
				console.log('点赞');
				this.$emit("clickPraise", id)
			},
			
			// 格式化点赞和评论数量
			formatPraisesComments(value, tip) {
				if(value >= 10000) {
					let newValue = value/10000
					return newValue.toFixed(1)+'w'
				}else if(value >= 1000) {
					let newValue = value/1000
					return newValue.toFixed(1)+'k'
				}else if(value > 0) {
					return value
				}else{
					return tip
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	// 动态卡片
	.post-card {
		box-shadow: #f0f0f0 0 0 10rpx;
		&.b-p {
			box-shadow: $uni-color-primary 0 0 10rpx;
		}
	}
	
	// 右上角勾选盒子
	.check-box {
		width: 64rpx;
		height: 64rpx;
		border-radius: 0 20rpx 0 20rpx;
		box-shadow: #cccccc -2rpx 2rpx 6rpx;
		background: #ffffff;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 9;
		&.b-p {
			box-shadow: $uni-color-primary -2rpx 2rpx 6rpx;
		}
	}
	
	// 图片区域
	.image-grid {
		display: grid;
		&.grid1 {
			grid-template-columns: repeat(1, 1fr);
			.image {
				display: block;
				max-height: 420rpx;
				max-width: 100%;
			}
		}
		&.grid2 {
			
			grid-template-columns: repeat(2, 210rpx);
			column-gap: 12rpx;
			row-gap: 12rpx;
			.image {
				display: block;
				width: 210rpx;
				height: 210rpx;
			}
		}
		&.grid3 {
			grid-template-columns: repeat(3, 210rpx);
			column-gap: 12rpx;
			row-gap: 12rpx;
			.image {
				display: block;
				width: 210rpx;
				height: 210rpx;
			}
		}
	}
	// 底部操作区域
	.row-grid-box {
		height: 80rpx;
	}
</style>
